<template>
  <section class="header-wrap">
    <section class="header-wrap__content">
      <section class="left-rect" />
      <section class="right-rect" />
      <section class="light" />

      <section class="menu-wrap">
        设备可视化
      </section>
      <section class="title-wrap">
        <h1 class="title">
          <span class="title-text">设备可视化平台</span>
        </h1>
      </section>
      <section class="timers">
        {{ dateYear }} {{ dateDay }} {{ week }}
      </section>
    </section>
  </section>
</template>

<script setup lang="ts">
import { onBeforeUnmount,ref } from 'vue';

import { formatDate } from '@/utils/index';

type Interval = number | null

const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

let timer:Interval = null;
const dateYear = ref(formatDate(new Date(), 'YYYY-MM-DD'));
const dateDay = ref(formatDate(new Date(), 'HH:mm:ss'));
const week = ref(weekday[new Date().getDay()]);
const timeFn = () => {
  timer = window.setInterval(() => {
    dateYear.value = formatDate(new Date(), 'YYYY-MM-DD');
    dateDay.value = formatDate(new Date(), 'HH:mm:ss');
  }, 1000);
};
timeFn();

onBeforeUnmount(() => {
  if(timer) {
    window.clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>
  .header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: var(--maia-small-space) var(--maia-small-space) 0;
    margin-bottom: 4px;

    .header-wrap__content {
      position: relative;
      width: 100%;
      height: var(--maia-nav-header-height);
      background-image: url('../../../assets/images/headers/top.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;

      @include flex-box(center);

      .light {
        position: absolute;
        bottom: -26px;
        width: 100%;
        height: 56px;
        background-image: url('../../../assets/images/headers/light.png');
        background-position: 80px center;
      }

      .left-rect,
      .right-rect {
        position: absolute;
        top: -2px;
        width: 140px;
        height: 6px;
        background-image: url('../../../assets/images/headers/rect.png');
      }

      .left-rect {
        left: 11%;
      }

      .right-rect {
        right: 11%;
        transform: rotate(180deg);
      }

      .title-wrap {
        .title {
          position: relative;
          height: 60px;
          line-height: 46px;
          color: transparent;
          text-align: center;
          background-size: cover;

          .title-text {
            width: 100%;
            font-size: 38px;
            font-weight: 900;
            letter-spacing: 6px;
            background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.85%, #01aaff 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }

  .timers {
    position: absolute;
    top: 30px;
    right: 0;
    display: flex;
    align-items: center;
    font-size: 18px;
  }

  .menu-wrap {
    position: absolute;
    top: 30px;
    left: 0;
    display: flex;
    align-items: center;
    font-size: 18px;
  }
</style>
